<template>
  <div>
    <crud-title required :title="'供应商信息'" />
    <avue-crud
      ref="crud"
      :option="option"
      :data="data"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-click="handleRowClick"
      @selection-change="selectionChange"
    >
    <el-button type="primary" slot="menuLeft" @click="deleteGroup">批量删除</el-button>
    </avue-crud>
  </div>
</template>

<script>
import CrudTitle from '@/components/base/title'
import { option } from '@/option/tenant/supplier/relation-info'
export default {
  name: 'RelationSupplierInfo',
  components: { CrudTitle },
  data() {
    return {
      data: [
        {
          supplierName: 'xxx',
          businessProfitContributionLevel: 1,
          supplierIndustryCompetitivenessLevel: 1,
          businessImportanceLevel: 1,
          scaleProportionLevel: 1,
          businessCompetitivenessLevel: 1,
          paymentCollectionLevel: 1,
          goodwillPopularityLevel: 1,
          theoreticalRelationshipOrientation: '1',
          approveRelationship: '1'
        }
      ],
      option: option.call(this),
      column: {},
      checkIndex: []
    }
  },
  computed: {
    columns() {
      return {
        x:
          this.column.businessProfitContributionLevel * 0.4 +
          this.column.supplierIndustryCompetitivenessLevel * 0.3 +
          this.column.businessImportanceLevel * 0.3,
        y:
          this.column.scaleProportionLevel * 0.25 +
          this.column.businessCompetitivenessLevel * 0.25 +
          this.column.paymentCollectionLevel * 0.25 +
          this.column.goodwillPopularityLevel * 0.25
      }
    }
  },
  watch: {
    columns(row) {
      console.log(row)
      if (row.x <= 2.5 && row.y <= 2.5) {
        this.column.theoreticalRelationshipOrientation = '1'
      }
      if (row.x <= 2.5 && row.y > 2.5) {
        this.column.theoreticalRelationshipOrientation = '3'
      }
      if (row.x > 2.5 && row.y <= 2.5) {
        this.column.theoreticalRelationshipOrientation = '2'
      }
      if (row.x > 2.5 && row.y > 2.5) {
        this.column.theoreticalRelationshipOrientation = '4'
      }
    }
  },
  methods: {
    // getOperatingButtons(row, index) {
      // const drop = { text: '删除', callback: this.handleDelete }
      // const edit = { text: row.$cellEdit ? '保存' : '修改', callback: this.handleCell }
      // return [edit, drop]
    // },
    rowSave(form, done) {
      this.$message.success('新增数据' + JSON.stringify(form))
      done()
    },
    handleCell(row, index) {
      this.column = row
      this.$refs.crud.rowCell(row, index)
    },
    // rowUpdate(form, index, done) {
    //   this.$message.success('编辑数据' + JSON.stringify(form) + '数据序号' + index)
    //   done()
    // },
    // handleDelete(row, index) {
    //   this.data.splice(index, 1)
    // },
    handleRowClick(row, event, column) {
      this.column = row
      this.$refs.crud.rowCell(row, row.$index)
    },
    selectionChange(row) {
      this.checkIndex = row.map(v => v.$index)
    },
    deleteGroup(){
      this.data = this.data.filter(item => !(this.checkIndex.includes(item.$index)))
    }
  }
}
</script>

<style></style>
